HTML Style Guide

Design Basics ~ HTML Tables ~ HTML Frames ~ Java & ActiveX The BEST HTML Tool ~ WebExpress Tutorial

Tables are the most effective design tools ever implemented in HTML... To put it bluntly, they're really cool! If you're just starting out using tables and feel you need to know more about them, check out our HTML Table Overview. It will explain a few Table fundamentals that you can use in conjunction with whatever editor you use to create your Web Pages. To learn how to create Tables in WebExpress, click here. When you're ready to use Tables, here are some design tips and cautions you should find useful: Guidelines & Ideas For HTML Tables Table Borders: I hate to start this section with a caution, but I must! When Tables first hit the Web it seemed everybody wanted you to know they were using them, and to prove it they'd turn on the Table Border modifier so visitors would see the entire work of art. As a consequence, bordered Tables now tend to look out of date - since we've all seen plenty of them! In my own opinion, Table borders should be used sparingly to hide the 'magic' of the Table itself. There are times when a table border is essential (for separating the different fields of an HTML FORM, for example), but usually borders just tend to complicate the appearance of Web a page and make it that much more difficult to read. Using A Large Table For An Entire Document: Don't necessarily limit your Tables to small structures like menus, FORM's, and the like. Tables can be used to produce magazine-like Web pages containing images mixed with text. In fact, the entire contents of a page can be contained in a single Table, as these HTML Style Guide pages are. Nested Tables: Nested Tables are Tables within Tables! If that's confusing, take a look at the HTML Table Overview that I mentioned earlier. Table nesting can give you the design freedom you need to create special sites, but you need to completely understand how Table sizes are determined and how the browser uses the widths you specify to display your Table. With all of your Tables you have the ability to set the width of the entire Table and the widths of individual Columns within the Table. These widths can be entered in two formats: variable and fixed width formats... Using Variable Table Widths: If you choose to use variable widths, the width of your Table and the Cells it contains will change relative to the size of the browser window. This comes in handy for handling various system resolution settings as discussed in the section Design Basics. Also if a visitor resizes his or her browser window, your Table will adjust to fit the new size. To use variable Table widths, you enter the width as a percentage of the browser window size (just enter the '%' sign after the value for the HTML Table Tag "WIDTH=" modifier). To use variable Cell Column widths you specify the Cell width as percentage of the overall Table size. The disadvantage of variable width Tables is that you still can't anticipate exactly what your page content will look like to a visitor. Using Fixed Table Widths: On the other hand, fixed Table widths allow you almost complete control of how your finished page will look (unless a visitor has changed the default font settings, disabled images, etc.). Fixed width Tables contain width modifier values entered as absolute screen pixel widths (typed as above but without the '%' sign). Using fixed width Tables will cause the browser to display your Table nearly the same regardless of a user's system settings or browser window size. This guide uses one large fixed width Table, while the Cell widths are set as variable. The Cells aren't really variable, though, since the Table size doesn't change. The disadvantage of fixed width Tables is obvious: in order to be readable at all resolutions, the Table width must be set to accommodate the lowest possible resolution, 640 X 480. On systems set to greater resolutions a visitor ends up with a blank area to the right (or left) as you might see to the right of this table! Next Page... Design Basics ~ HTML Tables ~ HTML Frames ~ Java & ActiveX The BEST HTML Tool ~ WebExpress Tutorial Copyright © 1997 by MicroVision Development, Inc.